@import 'common/base';
.swiper-wrapper{display: grid;grid-auto-flow: column;transition-timing-function: var(--ease);}
#app{
  header{
    position: fixed;width: 100%;top: 0;left: 0;z-index: 500;
    .navMask{
      background-color: #fff;transform-origin: 50% 0%;padding: .15rem .35rem;
      height: 15vw;width: 100%;position: absolute;left: 0;
      top: 100%;transition: transform .6s var(--ease);
      transform: scaleY(0);z-index: 170;pointer-events: none;
    }
    .pcNav{
      padding: 0 .35rem;@extend .fxb;position: relative;z-index: 180;
      transition: all .6s var(--ease);height: .8rem;
      .left{
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0.1rem);
        height: .64rem;@extend .fxb;border-radius: 5px;
        width: calc(100% - 1.75rem);position: relative;
        padding: 0 .85rem 0 .15rem;
        box-shadow: 0px .02rem .12rem -3px rgba(82,106,128,0.15);
        transition: background-color .6s var(--ease);
        .logoBox{
          position: relative;z-index: 4;height: 100%;
          &>img{
            height: .42rem;transition: opacity .5s var(--ease);
            &.deep{@extend .layout-v-middle;left: 0;opacity: 0;}
          }
        }
        .items{
          display: grid;grid-auto-flow: column;
          gap: 0 .4rem;z-index: 1;align-items: center;
          justify-content: center;height: 100%;left: 0;top: 0;
          .navList{
            position: relative;height: 100%;
            display: flex;align-items: center;justify-content: center;
            .dot{
              width: 7px;height: 7px;
              margin-right: .1rem;transform: scale(0);background-color: var(--main);
              transition: transform .5s var(--ease);
            }
            &>a{display: block;transition: color .5s var(--ease);position: relative;z-index: 2;}
            .child{
              background-color: rgba(255, 255, 255, 0.85);
              padding: .05rem 0 .1rem 0;
              border-bottom-right-radius: .05rem;
              border-bottom-left-radius: .05rem;
              backdrop-filter: blur(0.1rem);overflow: hidden;
              width: calc(100% + .5rem);left: -.25rem;
              box-shadow: 0px .05rem .2rem -2px rgba(82,106,128,0.15);
              &>li{
                &>a{line-height: .35rem;font-weight: 500;}
              }
            }
            &:hover{
              .dot{
                transform: scale(1);
              }
              &>a{color: var(--main);}
            }
            &.on{
              .dot{
                transform: scale(1);
              }
              .child{}
            }
          }
        }
        .language{
          position: absolute;right: 0;height: 100%;
          top: 0;@extend .fxc;padding: 0 .2rem 0 .2rem;
          &>a{
            transition: color .5s var(--ease);
          }
          &:hover{
            &>a{color: var(--main);}
          }
          &:after{
            content: "";position: absolute;width: 1px;
            left: 0;bottom: 0;top: 0;margin: auto 0;
            height: .15rem;background-color: rgba(28, 30, 60, 0.5);
          }
        }
      }
      .right{
        position: relative;z-index: 4;
        width: 1.6rem;height: .64rem;
        box-shadow: 0px .02rem .12rem -3px rgba(82,106,128,0.15);
        .layer-btn{
          height: 100%;width: 100%;border-radius: 5px;@extend .fxc;
        }
      }
      &.go{
        .left{
          background-color: rgba(255, 255, 255, 0.85);
        }
      }
    }
    &.deep{
      .pcNav{
        .logoBox{
          &>img.white{opacity: 0;}
          &>img.deep{opacity: 1;}
        }
        .mid{
          .wc{
            color: var(--black);
          }
        }
      }
    }
  }
  main{
    position: relative;z-index: 5;
  }
  &>footer{
    background-color: var(--bgColor)!important;
    &:before{
      content: "";@extend .layout-middle;z-index: 1;
      width: calc(100% - .2rem);
      height: calc(100% - .2rem);border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.97);
      background-image: url(../public/image/base/footBg.jpg.webp);
      background-size: cover;background-repeat: no-repeat;
      background-position: center;
    }
  }
  footer{
    border-radius: 5px;position: relative;z-index: 10;
    width: 100%;overflow: hidden;
    padding:.6rem .5rem .3rem .5rem;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(.1rem);
    .top{
      display: grid;position: relative;z-index: 4;
      grid-template-columns: 2.6rem auto 2.6rem;
      margin-bottom: 1.6rem;
      .logoBox{
        &>img{width: 2.6rem;}
      }
      .col{
        display: grid;
        grid-template-columns: repeat(7,1fr);
        gap: 0 .4rem;
        .list{
          position: relative;
        }
      }
      .right{
        display: flex;align-items: flex-start;
        justify-content: flex-end;
        .toTop{
          @extend .flex-col-cc;cursor: pointer;
          .icon{
            transform: rotate(-90deg);
            width: .65rem;
            mask-repeat: repeat-x;
            mask-size: .65rem 100%;
            -webkit-mask-position-x: 0%;
            mask-image: url("/image/base/arrow.svg");
            //transition: all 1s steps(5);
            transition: all 1s var(--ease);
            .rect {
              fill: rgba(21, 43, 217, 1);
              transition: opacity .5s var(--ease) .2s, fill .5s var(--ease) .2s;
            }
          }
          &:hover{
            .icon{
              -webkit-mask-position-x: .65rem;
              .rect{
                opacity: 1;
              }
            }
          }
        }
      }
    }
    .btm{
      display: grid;align-items: end;position: relative;z-index: 4;
      grid-template-columns: repeat(3,1fr);
      padding-bottom: .3rem;
      .col{
        display: grid;grid-template-columns: repeat(7,.4rem);
        gap: 0 .15rem;justify-content: center;
      }
      .left{
        display: flex;flex-direction: column;
        align-items: flex-start;justify-content: flex-end;
        .other{
          margin-bottom: .2rem;
          &>a{
            color: rgba(35, 23, 20, 0.6);
            transition: all .5s var(--ease);
            &:hover{
              color: var(--black);font-weight: 600;
            }
          }
          .line{height: .15rem;width: 1px;background-color: rgba(40, 35, 30, 0.3);margin: 0 .2rem}
        }
        .note{
          color: rgba(40, 35, 30, 0.5);
        }
      }
      .right{
        display: flex;
        align-items: center;justify-content: flex-end;
        .imgBox{
          @extend .fxc;
          &>img{height: 1rem;margin-right:.2rem;display: block;}
        }
      }
    }
  }
}
#loading{
  position: fixed;width: 100%;height: 100%;
  left: 0;top: 0;z-index: 600;
  .media{
    background-size: cover;
    background-position: center;background-repeat: no-repeat;
    @extend .pa-mid;width: 100%;height: 56.25vw;
    transition: opacity .6s var(--ease);
    video{
      display: block;width: 100%;height: 100%;
      object-fit: cover;position: relative;z-index: 6;
    }
    &.active{
      opacity: 0;
    }
  }
  .rect{
    width: 2.32rem;
    height: 2.32rem;
    display: block;transform-origin: 0 0;
    @extend .layout-middle;opacity: 0;
    transition: transform 1s var(--ease);
  }
}
#fixBox{
  display: grid;position: fixed;right: 0.08rem;
  bottom: 0.9rem;width: 0.5rem;z-index: 200;
  grid-template-rows:1.2rem 0.5rem;
  grid-template-columns: 0.5rem;
  align-content: center;gap: 0.1rem;
  opacity: 0;pointer-events: none;
  transition: all .5s var(--ease);
  .col{
    border-radius: 0.05rem;background-color: rgba(255,255,255,1);
    .layer-share{
      padding: 0;width: 100%;border-radius: 0;height: 0.36rem;
      .layer-icon{width: 100%;}
      &:hover{
        .iconfont{transform: translate3d(0,0,0);}
      }
    }
  }
  .toTop{
    padding: 0;
    z-index: 8;
    .icon{
      height: .2rem;
      transform: rotate(-90deg);
      .rect{
        fill: var(--main);
      }
    }
  }
  &.active{opacity: 1;pointer-events: painted;}
}
.row{
  width: 100%;position: relative;overflow: hidden;z-index: 3;
  .bgSign{position: absolute;top: calc(var(--top)*1rem);left: calc(var(--left)*1rem);}
  &>.bg{
    @extend .full;z-index: 1;pointer-events: none;
    &.fixBg{
      position: fixed;width: 100%;height: 100%;left: 0;top: 0;
      visibility: hidden;
      &.showImg{
        visibility: visible;
      }
    }
  }
  &>.inner{position: relative;z-index: 3;}
}
.home{
  .banner{
    height: 100vh;position: relative;z-index: 5;
    &.go{
      &>.bg{
        .mask{
          &>span{
            transform: translate3d(0,0,0)!important;
          }
        }
      }
    }
    .bg{
      .photo{
        @extend .full;
        #bannerSlider{
          @extend .full;
        }
      }
      .mask{
        position: absolute;z-index: 5;
        width: 50vw;left: 0;top: 0;height: 100%;
        display: grid;grid-template-columns: repeat(8,1fr);
        grid-template-rows: 100%;
        &>span{
          transform: translateZ(0);transition: transform 1.5s var(--ease);
          margin-left: -2px;
          @for $i from 1 through 20{
            &:nth-child(#{$i}){
              transform:translate3d(#{-90+$i*5vw},0,0);
            }
          }
          //background-color: rgba(20, 35, 166, 0.1);
          &:nth-of-type(2n+1){backdrop-filter: blur(0.3rem);}
          &:nth-of-type(2n+2){backdrop-filter: blur(0.4rem);}
        }
      }
    }
    .inner{
      display: flex;flex-direction: column;height: 100%;
      align-items: flex-start;justify-content: center;position: relative;
      .group{
        padding: 0 1.6rem;height: 3.8rem;position: relative;
        .list{
          position: absolute;
          bottom: 0;top: 0;opacity: 0;
          &>img{
            margin-bottom: .7rem;display: block;
            transition: opacity 1.2s var(--ease),transform 1.2s var(--ease),color .3s var(--ease);
            transform-origin: 50%;transform:translate3d(.2rem,0,0);opacity: 0;
          }
          h2{
            font-size: 1rem;line-height: .8;color: #fff;padding-bottom: .3rem;letter-spacing: -0.05em;
            mask: linear-gradient(100deg,rgba(0,0,0,1) 30%,rgba(0,0,0,0.4) 80%);
            white-space: nowrap;perspective: 5rem;
            .letter{
              margin-right: .2em;display: inline-block;
              transition: opacity 1.5s var(--ease),transform 1.5s var(--ease),color .3s var(--ease);
              opacity: 0;transform-origin: 0% 50%;
              @for $i from 1 through 20{
                &:nth-child(#{$i}){
                  transform:rotateY(#{-1-$i*2deg}) rotateX(#{1+$i*2deg}) translate3d(#{.2rem+$i*.1rem},0,0);
                  transition-delay: #{$i*0.05s};
                }
              }
            }
          }
          p{
            transition: opacity 1.2s var(--ease),transform 1.2s var(--ease),color .3s var(--ease);
            transform-origin: 50%;transform:translate3d(.2rem,0,0);opacity: 0;
            transition-delay: 0.2s;
          }
          &.on{
            opacity: 1;
            &>img{
              transform: translate3d(0,0,0);opacity: 1;
            }
            h2{
              .letter{opacity: 1;transform: translate3d(0,0,0);}
            }
            p{
              transform: translate3d(0,0,0);opacity: 1;
            }
          }
        }
      }
      .other{
        @extend .full;pointer-events: none;
        .bannerPrev{
          width: 1.6rem;height: 1.6rem;background-color: rgba(255,255,255,0.3);
          border-radius: 5px;position: absolute;right: 2.7rem;bottom: 3.3rem;
          @extend .fxc;z-index: 5;pointer-events: auto;backdrop-filter: blur(0.3rem);
          .icon{
            transform: scaleX(-1);
          }
        }
        .bannerNext{
          width: 2.6rem;height: 2.6rem;background-color: rgba(255,255,255,0.3);
          border-radius: 5px;position: absolute;right: .35rem;bottom: 0.9rem;
          @extend .fxc;pointer-events: auto;backdrop-filter: blur(0.3rem);
        }
        .set{
          padding-bottom: .45rem;position: absolute;right: .35rem;
          bottom: 0;@extend .fxb;width: 4rem;
          &>p{color: rgba(255,255,255,0.6);}
          #bannerSum{
            color: rgba(255,255,255,0.6);
          }
          .line{
            width: 1px;height: .15rem;background-color: rgba(255,255,255,0.3);
            margin: 0 .12rem;transform: skewX(-10deg);
          }
          .sum{
            color: rgba(255,255,255,0.3);
          }
        }
        .scr{
          position: absolute;left: 1.6rem;bottom: .45rem;
          @extend .fxc;flex-direction: column;
          cursor: pointer;pointer-events: painted;
          .icon{
            display: block;height: .32rem;position: relative;z-index: 6;
            margin-bottom: .1rem;transform: rotate(90deg);
            .rect{
              fill: #fff;opacity: .4;
              transition: opacity .5s var(--ease);
              &:nth-child(1){transition-delay: 0.2s;}
              &:nth-child(2){transition-delay: 0.2s;}
              &:nth-child(3){transition-delay: 0.2s;}
              &:nth-child(4){transition-delay: 0.3s;}
              &:nth-child(5){transition-delay: 0.3s;}
              &.after{opacity: 0.15;transition-delay: 0.1s;}
              &.before{opacity: 1;}
            }
          }
        }
      }
    }
    .clear{
      width: 100%;height: 3rem;z-index: 5;pointer-events: none;
      display: grid;grid-template-columns: repeat(9,1fr);position: absolute;bottom: -2px;left: 0;
      align-items: end;
      .chunk{
        background-size: 100vw 100%;height: 0;
        position: relative;overflow: hidden;
        transform-origin: 50% 100%;
        .pic{
          display: block;width: 100vw;position: absolute;bottom: 0;
          background-repeat: no-repeat;left: 0;height: 56.25vw;
          background-position: center bottom;
        }
      }
    }
  }
  .r1{
    position: relative;z-index: 2;overflow: visible;
    .bg{
      overflow: hidden;
      .pic{}
    }
    .inner{
      height: 540vh;
      .clear{
        height: 100%;width: 100%;position: absolute;
        left: 0;top: 0;overflow: hidden;
        .step{
          height: 30vw;width: 100%;position: relative;
          left: 0;
          @extend .flex-col-cb;
          &>span{width: 100%;height: .1rem;}
          &:nth-of-type(1){top: 34%;}
          &:nth-of-type(2){top: 40%;height: 24vw;}
          &:nth-of-type(3){top: 50%;height: 25vw}
          &:nth-of-type(4){top: 60%;height: 50vw;}
        }
      }
      .group{
        height: 100vh;position: sticky;left: 0;top: 0;
        width: 100%;overflow: hidden;
        .frameBox{
          @extend .pa-mid;
          .fillImg{
            opacity: 0;min-width: 100vw;
            display: block;
            @media screen and (orientation: landscape){
              min-height: 100vh;
            }
          }
          .frameCv{
            @extend .full;
          }
        }
        .items{
          @extend .full;z-index: 6;
          .part{
            @extend .full;
            .alanUp{
              transition: opacity 1s var(--ease),transform 1s var(--ease),color .3s var(--ease),background-color .6s var(--ease);
            }
            &.p1{
              padding: 0 .35rem 0.5rem .35rem;
              display: grid;grid-template-columns: 36% 36%;
              grid-template-rows: 100%;
              justify-content: space-between;
              .col{
                .img{
                  width: 3.03rem;
                }
              }
            }
            &.p2{
              padding: 1.25rem .35rem 0 .35rem;
              display: grid;grid-template-columns: 36% auto 36%;
              grid-template-rows: 100%;align-items: start;
              justify-content: space-between;
              .left{padding-top: .15rem;}
              .right{padding-top: .15rem;}
              .col{
                .img{
                  width: 4.49rem;
                }
                .lab{
                  padding: .15rem .3rem;border-radius: 2rem;
                  border: 1px solid rgba(255, 255, 255, 0.3);
                  text-align: center;min-width: 2.4rem;
                }
                &>small{
                  margin: .2rem 0;
                }
                .line{
                  height: 4.8rem;width: 1px;position: relative;
                  background: linear-gradient(0deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.5) 100%);
                  &:after{
                    content: '';position: absolute;
                    border-radius: 50%;width: 5px;height: 5px;
                    left: -2px;top: 0;background-color: #fff;
                  }
                }
              }
            }
            &.p3{
              @extend .pa-mid;
              width: 100%;height: 56.25vw;
              .list{
                position: absolute;
                width: 3.2rem;left: 0;right: 0;margin: 0 auto;
                h3{
                  margin-bottom: .5rem;
                  small{display: block;font-weight: 200;}
                }
                p{
                  color: rgba(255, 255, 255, 0.3);
                }
                &:nth-of-type(1){top: 22%;right: 46%;}
                &:nth-of-type(2){bottom: 42%;right: 72%;}
                &:nth-of-type(3){bottom: 17%;right: 48%;}
                &:nth-of-type(4){text-align: right;top: 25%;left: 58%;}
                &:nth-of-type(5){text-align: right;bottom: 43%;left: 72%;}
                &:nth-of-type(6){text-align: right;bottom: 16%;left: 72%;}
              }
            }
            &.p4{
              padding: 1.4rem 1rem 1.2rem 1rem;
              display: flex;flex-direction: column;
              align-items: flex-start;justify-content: space-between;
              h3{
                font-size: 1rem;line-height: .9;color: #fff;padding-bottom: .3rem;letter-spacing: -0.05em;
                mask: linear-gradient(100deg,rgba(0,0,0,1) 35%,rgba(0,0,0,0.1) 90%);
                white-space: nowrap;perspective: 5rem;
                .letter{
                  margin-right: .2em;display: inline-block;
                  transition: opacity 1.5s var(--ease),transform 1.5s var(--ease),color .3s var(--ease);
                  opacity: 0;transform-origin: 0 50%;
                  @for $i from 1 through 20{
                    &:nth-child(#{$i}){
                      transform:translate3d(#{.2rem+$i*.1rem},0,0);
                      transition-delay: #{$i*0.08s};
                    }
                  }
                }
              }
              .msg{
                width: 100%;padding-left: 70%;
                margin-top: .6rem;
                h4{font-weight: 400;line-height: 1.1;}
              }
              .layer-btn{
                width: 2.2rem;height: .65rem;
                .txc{transform: translate3d(.05rem,0,0)}
                .icon{height: .22rem;transform: translate3d(.25rem,0,0)}
              }
              &.go{
                h3{
                  .letter{
                    opacity: 1;transform: none;
                  }
                }
              }
            }
          }
        }
        .note{
          position: absolute;text-align: center;
          width: 50vw;right: 0;bottom: 5%;left: 0;margin: 0 auto;
        }
      }
    }
  }
  .r2{
    height: 100vh;overflow: hidden;position: relative;z-index: 5;
    &>svg{position: absolute;left: 0;top: 0;}
    .sticky{
      height: 100vh;position: sticky;left: 0;top: 0;
      width: 100%;overflow: hidden;
      &>.bg{
        @extend .full;z-index: 1;pointer-events: none;
        &.fixBg{
          position: fixed;width: 100%;height: 100%;left: 0;top: 0;
          visibility: hidden;
          &.showImg{
            visibility: visible;
          }
        }
      }
      &>.inner{position: relative;z-index: 3;}
    }
    .bg{
      .box{
        @extend .full;z-index: 10;overflow: hidden;opacity: 0;
        transition: transform 2s var(--ease),opacity 1s var(--ease);
        .after{
          @extend .full;width: 100vw;
          z-index: 4;background-size: cover;
          transform: scale3d(1.1,1.1,1.1);
          transition: transform 2s var(--ease),opacity 1s var(--ease);
          &:before{
            content: "";@extend .full;z-index: 1;pointer-events: none;
            background: linear-gradient(180deg,rgba(0,0,0,0.1) 50%,rgba(0,0,0,.8) 100%);
          }
        }
        .before{
          //clip-path: url(#ringClip);
          mask-image: url("/image/base/mask.svg");
          mask-repeat: no-repeat;
          mask-size: 12rem;
          mask-position: right bottom;
          z-index: 5;right: 0;bottom: 0;position: absolute;
          width: 100%;height: 100%;
          &:after{
            content: "";@extend .full;z-index: 10;
            background-color: rgba(255,255,255 , 0);
            backdrop-filter: blur(0rem);
            transition: all 2s var(--ease);
          }
          .pic{
            width: 100vw;position: absolute;
            height: 100vh;bottom: 0;right: 0;
            transform: scale3d(1.15,1.15,1.15);
            transform-origin: 100% 100%;
            transition: transform 2.2s var(--ease);
          }
        }
        //&.in{
        //  z-index: 12;opacity: 1;
        //  .before{
        //    &:after{
        //      background-color: rgba(103,116,223 , 0.1);
        //      backdrop-filter: blur(0.3rem);
        //    }
        //    .pic{transform: scale3d(1,1,1);}
        //  }
        //  .after{
        //    transform: scale3d(1,1,1);
        //  }
        //}
        &.on{
          opacity: 1;z-index: 11;
          .before{
            &:after{
              background-color: rgba(103,116,223 , 0.1);
              backdrop-filter: blur(0.3rem);
            }
            .pic{transform: scale3d(1,1,1);}
          }
          .after{
            transform: scale3d(1,1,1);
          }
        }
        //&.out{
        //  .after{
        //    transform: scale3d(1.1,1.1,1.1);
        //  }
        //}
      }
    }
    .inner{
      height: 100%;position: relative;
      width: calc(100% - 2rem);margin: 0 auto;
      .group{
        width: 100%;padding-top: 1.4rem;
        display: flex;justify-content: flex-end;
        align-items: flex-start;
        .items{
          display: flex;align-items: flex-start;
          justify-content: flex-start;flex-direction: column;
          .sliderDot{
            position: relative;line-height: 1.2;
            &>span{
              font-size: inherit;cursor: pointer;font-weight: 500;
              &:nth-of-type(1){
                color: rgba(255, 255, 255, 0.5);
              }
              &:nth-of-type(2){
                position: absolute;
                left: 0;top: 0;
                color: rgba(255, 255, 255, 1);
                clip-path: inset(0 100% 0 0 round 0);
                transition: all .6s var(--ease);
              }
            }
            &:hover{
              &>span{
                &:nth-of-type(2){
                  clip-path: inset(0 0 0 0 round 0);
                }
              }
            }
            &.on{
              &>span{
                &:nth-of-type(2){
                  clip-path: inset(0 0 0 0 round 0);
                }
              }
            }
          }
        }
      }
      .btm{
        position: absolute;bottom: 1.2rem;
        width: 100%;left: 0;
      }
    }
    .clear{
      width: 100%;height: 3rem;z-index: 5;pointer-events: none;
      display: grid;grid-template-columns: repeat(9,1fr);position: absolute;bottom: -2px;left: 0;
      align-items: end;
      .chunk{
        background-size: 100vw 100%;height: 0;
        position: relative;overflow: hidden;
        transform-origin: 50% 100%;
        .pic{
          display: block;width: 100vw;position: absolute;bottom: 0;
          background-repeat: no-repeat;left: 0;height: 3rem;
          background-position: center bottom;
        }
      }
    }
  }
  .r3{
    width: 100%;overflow: visible;
    z-index: 5;
    .bg{
      .pic{
        background-position: top;
        background-size: 100% 100%;pointer-events: none;
      }
    }
    .inner{
      padding-top: .5rem;
      .logoTxt{
        display: block;width: 17rem;margin: 0 auto;
        mask: linear-gradient(100deg,rgba(0,0,0,1) 35%,rgba(0,0,0,0.1) 90%);
      }
      &>.line{
        display: block;width: 17rem;margin: 0 auto;height: 1px;
        background-color: rgba(255, 255, 255, .2);margin-top: .2rem;
      }
      .r3Txt{
        width: 100%;
        .layer-topic{
          width: 100%;max-width: 17rem;margin: 0 auto;
          padding: .5rem 0;
          display: flex;align-items: flex-start;
          justify-content: space-between;
          .msg{
            position: relative;
            .after{
              color: rgba(255,255,255,0.5);
            }
            .above{
              position: absolute;left: 0;top: 0;color: #fff;width: 100%;
              .letter{
                &:nth-of-type(1){clip-path: inset(0 calc(100% - var(--go)*100%) 0 0 round 0);}
                &:nth-of-type(2){clip-path: inset(0 calc(100% - var(--go)*110%) 0 0 round 0);}
                &:nth-of-type(3){clip-path: inset(0 calc(100% - var(--go)*120%) 0 0 round 0);}
                &:nth-of-type(4){clip-path: inset(0 calc(100% - var(--go)*120%) 0 0 round 0);}
              }
            }
            .more{
              margin-top: .7rem;cursor: pointer;
              display: flex;justify-content: flex-end;align-items: center;
              .icon{
                height: .65rem;display: block;
                .rect{
                  fill: #fff;opacity: .4;
                  transition: opacity .5s var(--ease) .2s,fill .5s var(--ease) .2s;
                  &:nth-child(1){transition-delay: 0.2s;}
                  &:nth-child(2){transition-delay: 0.2s;}
                  &:nth-child(3){transition-delay: 0.2s;}
                  &:nth-child(4){transition-delay: 0.3s;}
                  &:nth-child(5){transition-delay: 0.3s;}
                  &.after{opacity: 0.15;transition-delay: 0.1s;}
                  &.before{opacity: 1;}
                }
              }
              &:hover{
                .icon{
                  .rect{
                    opacity: 1;fill: #fff!important;
                  }
                }
              }
            }
          }
        }

      }
      .group{
        width: 100%;height: 300vh;position: relative;
        .box{
          height: 100vh;position: sticky;left: 0;top: 0;
          width: 100%;overflow: hidden;
          .layer-topic{
            position: absolute;top: 0;z-index: 10;
            width: 17rem;right: 0;left: 0;margin: 0 auto;
            padding: .5rem 0;
            display: flex;align-items: flex-start;
            justify-content: space-between;
            .msg{
              position: relative;width: 51%;
              display: flex;flex-direction: column;
              align-items: flex-end;
              justify-content: flex-start;
              .after{
                color: rgba(255,255,255,0.5);
                width: 100%;
              }
              .above{
                position: absolute;left: 0;top: 0;color: #fff;width: 100%;
                .letter{
                  &:nth-of-type(1){clip-path: inset(0 calc(100% - var(--go)*100%) 0 0 round 0);}
                  &:nth-of-type(2){clip-path: inset(0 calc(100% - var(--go)*110%) 0 0 round 0);}
                  &:nth-of-type(3){clip-path: inset(0 calc(100% - var(--go)*120%) 0 0 round 0);}
                  &:nth-of-type(4){clip-path: inset(0 calc(100% - var(--go)*120%) 0 0 round 0);}
                }
              }
              .more{
                margin-top: .7rem;cursor: pointer;
                display: flex;justify-content: flex-end;align-items: center;
                .icon{
                  width: 0.65rem;display: block;
                  mask-repeat: repeat-x;
                  mask-size: 100% 100%;
                  -webkit-mask-position-x: 0%;
                  //transition: all 1s steps(5);
                  transition: all 1s var(--ease);
                  .rect{
                    fill: #fff;
                    transition: opacity .5s var(--ease) .2s,fill .5s var(--ease) .2s;
                  }
                }
                &:hover{
                  .icon{
                    -webkit-mask-position-x: 0.65rem;
                    .rect{
                      opacity: 1;fill: #fff!important;
                    }
                  }
                }
              }
            }
          }
          .content{
            position: absolute;width: 100%;height: 68%;
            left: 0;bottom: 0;
            .start{
              height: 7vw;width: 100%;
              @extend .layout-v-middle;pointer-events: none;
            }
            .alanUp{
              transition: opacity 1.2s var(--ease),transform 1.5s var(--ease),color .3s var(--ease),background-color .6s var(--ease);
              opacity: 0;transform-origin: 0 50%;
              @for $i from 1 through 20{
                &:nth-child(#{$i}){
                  transform:rotate(#{1+$i*1deg}) translate3d(0,#{.2+$i*.15rem},0);
                  transition-delay: #{$i*0.05s};
                }
              }
            }
            .child{
              @extend .full;
              &:nth-of-type(1){top: -14%}
              &:nth-of-type(1){}
              &:nth-of-type(3){top: 14%;}
              .plan{
                @extend .fxc;position: relative;
                width: 100%;height: 100%;
                &>img{
                  width: 6.79rem;display: block;
                  margin: 0 auto;
                }
                .ground{opacity: 1;transition: opacity .8s var(--ease),transform .8s var(--ease);}
                .before{
                  @extend .layout-middle;
                  opacity: 0;z-index: 5;
                  transition: opacity .8s var(--ease);
                }
                &.on{
                  .ground{transform: scale(1.15) translate3d(0,0.05rem,0)!important;opacity: 1!important;}
                  //.before{opacity: 1;}
                }
                &.none{
                  .ground{opacity: 0.3;}
                }
              }
            }
            &.go{
              .alanUp{
                opacity: 1;transform: translate3d(0,0,0);
              }
            }
          }
          .items{
            position: absolute;width: 78%;height: 78%;
            left: 0;bottom: 0;z-index: 6;right: 0;margin: 0 auto;
            .part{
              height: 100%;position: absolute;bottom: 0;left: 0;width: 100%;
              display: flex;justify-content: flex-start;align-items: center;
              &:nth-of-type(2n){
                justify-content: flex-end;
              }
              .list{
                width: 4.5rem;background-color: #f3f8fc;border-radius: .05rem;
                padding: .2rem;position: relative;
                display: flex;flex-direction: column;justify-content: space-between;
                align-items: flex-start;
                box-shadow: 0px .4rem 1rem -5px rgba(25,104,185,0.43);
                .imgBox{
                  position: relative;
                  .line{
                    height: .85rem;
                  }
                  .icon{
                    height: .7rem;position: absolute;top: 0;right: 0.1rem;
                  }
                }
                .msg{
                  padding: 0 .1rem .1rem .15rem;
                  .countFn{
                    line-height: 1;
                    sub{
                      vertical-align: baseline;margin-left: .2rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .r4{
    z-index: 6;margin-top: -1px;
    .bg{
      .pic{
        background-size: 100% 100%;
      }
    }
    .inner{
      width: calc(100% - .2rem);display: block;margin: 0 auto;
      padding: 1rem .5rem .5rem .5rem;
      border-radius: .08rem;
      .mask{
        @extend .full;
        display: grid;grid-template-columns: repeat(8,1fr);
        grid-template-rows: repeat(5,1fr);
        perspective: 5rem;
        span{
          transition: opacity 1.2s var(--ease),transform 1.5s var(--ease),color .3s var(--ease),background-color .6s var(--ease);
          opacity: 0;background-color: #fff;
          transform-origin: 50% 0%;
          @for $i from 1 through 50{
            &:nth-child(#{$i}){
              transform:rotateX(#{20+$i*.2deg}) translate3d(0,#{-.5rem+$i*.1rem},0) scale3d(0.8,0.8,0.8);
              transition-delay: #{$i*0.02s};
            }
          }
          &:nth-of-type(8){background-color: #f7fafd;}
          &:nth-of-type(13){background-color: #f7fafd;transition-delay:.1s;}
          &:nth-of-type(15){background-color: #f7fafd;transition-delay:.2s;}
          &:nth-of-type(16){background-color: #f7fafd;transition-delay:.3s;}
          &:nth-of-type(22){background-color: #f7fafd;transition-delay:.4s;}
          &:nth-of-type(23){background-color: #f7fafd;transition-delay:.5s;}
          &:nth-of-type(27){background-color: #f7fafd;transition-delay:.6s;}
          &:nth-of-type(28){background-color: #f7fafd;transition-delay:.7s;}
          &:nth-of-type(29){background-color: #f7fafd;transition-delay:.8s;}
          &:nth-of-type(34){background-color: #f7fafd;transition-delay:.9s;}
        }
        &.go{
          span{
            opacity: 1;transform: none;
          }
        }
      }
      .layer-topic{
        padding: 0 .5rem;margin-bottom: .5rem;position: relative;z-index: 6;
        p{line-height: 1;}
        h2{line-height: 1;}
      }
      .group{
        position: relative;z-index: 5;
        .more{
          right: .6rem;cursor: pointer;position: absolute;top: 0;
          display: flex;justify-content: flex-end;align-items: center;
          z-index: 10;
          .icon{
            height: .65rem;display: block;
            mask-repeat: repeat-x;
            mask-size: 100% 100%;
            -webkit-mask-position-x: 0%;
            //transition: all 1s steps(5);
            transition: all 1s var(--ease);
            .rect{
              fill: var(--main);
              transition: opacity .5s var(--ease) .2s,fill .5s var(--ease) .2s;
            }
          }
          &:hover{
            .icon{
              -webkit-mask-position-x: 0.65rem;
              .rect{
                opacity: 1;
              }
            }
          }
        }
        .part{
          display: grid;grid-template-columns: repeat(3,1fr);
          gap: 0 .18rem;margin-bottom: .25rem;
          &:last-of-type{margin-bottom: 0;}
          &:nth-of-type(2n){justify-content: end;}
          .box{
            overflow: hidden;position: relative;
            .layer-above{
              mask-size: 100% 100%;position: relative;
              mask-position: center;
              .mk{
                width: 100%;height: 100%;object-fit: cover;
                position: absolute;left: 0;top: 0;z-index: 7;
                opacity: 0;transition: opacity .6s var(--ease);
              }
            }
            .msg{
              padding: .35rem;height: 100%;z-index: 8;
              display: flex;flex-direction: column;
              align-items: center;justify-content: space-between;
              &:before{
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%);
              }
              .wid-100{position: relative;z-index: 5;}
              .note{
                width: 100%;
                .lab{padding: 5px .15rem;display: inline-block;border-radius: 5px;background-color: rgba(255, 255, 255, 0.2);backdrop-filter: blur(0.2rem);}
                h3{
                  width: 90%;
                  small{display: block;}
                }
              }
            }
            .arrow{
              position: absolute;bottom: 0;right: 0;padding: 0;
              width: .55rem;height: .55rem;z-index: 8;
              background-color: #fff;border: 1px solid rgba(21, 42, 211, 0.2);
              .icon{
                height: .15rem;
                .rect{
                  fill: var(--main);
                }
              }
            }
            @media screen and (orientation : landscape){
              &:hover{
                .layer-above{
                  .mk{
                    opacity: 1;
                  }
                }
                .arrow{
                  &>.mask{
                    transform: translateX(0)!important;
                  }
                  .blueMask{
                    -webkit-mask-position: 50% 0;
                    mask-position: 50% 0;
                  }
                  .icon{
                    -webkit-mask-position-x: 0.32rem;
                    .rect{
                      opacity: 1;fill: #fff!important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .r5{
    position: relative;z-index: 2;
    .bg{
      .pic{background-size: 100% 100%;}
    }
    .inner{
      .group{
        margin: 2.3rem auto;
        background-color: rgba(255, 255, 255, 0.3);border-radius: 5px;
        backdrop-filter: blur(.25rem);
        padding: .5rem .5rem .8rem .5rem;
        width: 7rem;display: flex;flex-direction: column;
        justify-content: center;align-items: center;
        .f-30{text-transform: uppercase;}
        h2{line-height: 1.05;text-align: center;margin: .6rem 0 .4rem 0;}
        .layer-btn{
          width: 2.2rem;height: .65rem;
          .txc{transform: translate3d(.05rem,0,0)}
          .icon{height: .22rem;transform: translate3d(.25rem,0,0)}
        }
      }
      .foot{
        padding: .1rem;
        position: relative;z-index: 8;
      }
    }
  }
}
.afterInner{
  .bannerRow{
    height: 100vh;width: 100%;position: relative;
    &.go{
      &>.bg{
        .mask{
          &>span{
            transform: translate3d(0,0,0)!important;
          }
        }
      }
    }
    .bg{
      .pic{
        &:before{
          content: "";@extend .full;z-index: 1;pointer-events: none;
          background: linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.5) 100%);
        }
      }
      .mask{
        position: absolute;z-index: 5;
        width: 32vw;left: 0;top: 0;height: 100%;
        display: grid;grid-template-columns: repeat(6,1fr);
        grid-template-rows: 100%;
        &>span{
          transform: translateZ(0);transition: transform 1.5s var(--ease);
          backdrop-filter: blur(0.3rem);margin-left: -2px;
          &:nth-of-type(2n){background-color: rgba(0,0,0,0.05);}
          &:nth-of-type(2n+1){background-color: rgba(0,0,0,0.1);}
          @for $i from 1 through 20{
            &:nth-child(#{$i}){
              transform:translate3d(#{-90+$i*4vw},0,0);
            }
          }
        }
      }
    }
    .inner{
      height: 100%;padding: 1rem 0;z-index: 6;
      display: flex;position: relative;
      align-items: flex-end;justify-content: space-between;
      .topic{
        opacity: 0;transition: opacity .5s var(--ease);
        &.go{opacity: 1;}
      }
      .scr{
        @extend .fxc;flex-direction: column;cursor: pointer;
        .icon{
          display: block;height: .25rem;position: relative;z-index: 6;
          margin-bottom: .1rem;transform: rotate(90deg);
          .rect{
            fill: #fff;opacity: .4;
            transition: opacity .5s var(--ease);
            &:nth-child(1){transition-delay: 0.2s;}
            &:nth-child(2){transition-delay: 0.2s;}
            &:nth-child(3){transition-delay: 0.2s;}
            &:nth-child(4){transition-delay: 0.3s;}
            &:nth-child(5){transition-delay: 0.3s;}
            &.after{opacity: 0.15;transition-delay: 0.1s;}
            &.before{opacity: 1;}
          }
        }
      }
    }
  }
  .stickyRow{
    overflow: visible;width: 100%;
    height: 600vh;
    .inner{
      position: sticky;width: 100%;
      height: 100vh;left: 0;top: 0;overflow: hidden;
      background-color: #fff;
      .part{
        @extend .full;padding: 0 8%;
        display: grid;align-content: center;
        grid-template-columns: 7.5rem calc(100% - 7.5rem);
        grid-template-rows: 46%;backdrop-filter: blur(0.2rem);
        &:nth-of-type(5n+1){background-color: rgba(255,255,255,0.9);}
        &:nth-of-type(5n+2){background-color: rgba(235, 239, 246,0.9)}
        &:nth-of-type(5n+3){
          background-color: rgba(110, 137, 168,0.9);
          .bc{color: #fff;}
          .mc{color: rgba(152, 203, 255, 1);}
          .dot.mc{background-color:#fff;}
        }
        &:nth-of-type(5n+4){
          background-color: rgba(16, 36, 193,0.9);
          .bc{color: #fff;}
          .mc{color: rgba(152, 203, 255, 1);}
          .dot.mc{background-color:#fff;}
        }
        &:nth-of-type(5n+5){
          background-color: rgba(9, 34, 107,0.9);
          .bc{color: #fff;}
          .mc{color: rgba(152, 203, 255, 1);}
          .dot.mc{background-color:#fff;}
        }
        .photo{
          position: relative;
          .sliderPhoto{
            position: relative;width: 100%;
            height: 100%;border-radius: .2rem;overflow: hidden;
            .pic{
              transform: scale(1.1);opacity: 0;
              transition: transform 1s var(--ease),opacity 1s var(--ease);
              &.on{
                opacity: 1;transform: scale(1);
              }
            }
          }
          .sign{
            position: absolute;right: .35rem;
            height: 2.4rem;width: 2.4rem;
            object-fit: contain;bottom: -1.2rem;
          }
          .pager{
            position: absolute;height: .4rem;bottom: 0;
            width: 100%;left: 0;@extend .fxc;
            .dot{
              width: .08rem;height: .08rem;margin: 0 .15rem;
              background-color: rgba(255, 255, 255, .3);
              transition: background-color .6s var(--ease);
              &.on{
                background-color: rgba(255, 255, 255, 1);
              }
            }
          }
        }
        .msg{
          position: relative;padding-left: 1.1rem;
          display: flex;flex-direction: column;
          justify-content: flex-end;align-items: flex-start;
          .note{
            position: absolute;top: 0;right: 0;
            text-align: right;
          }
        }
      }
    }
  }
  .applyRow{
    position: relative;z-index: 2;overflow: hidden;
    .bg{
      .pic{background-size: 100% 100%;}
    }
    .inner{
      .group{
        margin: 2.3rem auto;
        background-color: rgba(255, 255, 255, 0.3);border-radius: 5px;
        backdrop-filter: blur(.25rem);
        padding: .5rem .5rem .8rem .5rem;
        width: 7rem;display: flex;flex-direction: column;
        justify-content: center;align-items: center;
        .f-30{text-transform: uppercase;}
        h2{line-height: 1.05;text-align: center;margin: .6rem 0 .4rem 0;}
        .layer-btn{
          width: 2.2rem;height: .65rem;
          .txc{transform: translate3d(.05rem,0,0)}
          .icon{height: .22rem;transform: translate3d(.25rem,0,0)}
        }
      }
      .foot{
        padding: .1rem;
        position: relative;z-index: 8;
      }
    }
  }
  .rowFxContent{
    z-index: 1;background-color: #fff;height: auto!important;
    overflow: visible;width: 100%;
    .bg{
      .fixBg{
        position: fixed;width: 100%;height: 100%;left: 0;top: 0;
        visibility: hidden;background-position: center;
        background-repeat: no-repeat;background-size: cover;
        &.showImg{
          visibility: visible;
        }
        .p1{position: absolute;top: 0;left: 0;}
        .p2{position: absolute;bottom: 0;right: 0;}
      }
    }
    .fxInner{
      height: 100vh;position: relative;z-index: 5;
      padding: 0 1.6rem 0 1.6rem;
      @extend .fxc;
      &.tint{background-color: rgba(246, 247, 250, 1);}
      .fxBox{
        @extend .full;
        &.fix{
          position: fixed;
        }
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: paused;
        animation-delay: calc(var(--go)*-1s);
        animation-timing-function: linear;
        @media screen and (orientation: landscape){
          animation-name:clipFn;
        }
        @media screen and (orientation : portrait){
          display: flex;align-items: flex-end;justify-content: center;
          animation-name:clipFn_app;
        }
        .box{
          position: relative;height: 4.7rem;z-index: 1;
          border-radius: .05rem;width: 100%;
          .sliderPic{
            height: 100%;position: absolute;
            left: 0;top: 0;width: 100%;
            opacity: 0;overflow: hidden;
            .photo{
              width: 100vw;height: 100%;background-color: #000;
              position: absolute;left: 0;top: 0;
              clip-path:inset(0 0 0 0 round 5px);
              transition: all 1.2s var(--picEase);
              .pic{
                display: block;width: 100%;height: 100%;
                transform: scale(1.1);
                transition: opacity 1s var(--picEase),transform 2s var(--ease);
              }
            }
            &.on{
              opacity: 1;z-index: 10;
              .pic{
                transform: scale(1);
              }
            }
            &.in{
              opacity: 1;
              .pic{transform: scale(1);}
            }
            &.out{
              opacity: 1;z-index: 10;
              .photo{
                clip-path:inset(0 100% 0 0 round 5px);
                .pic{
                  opacity: 0.5;
                }
              }
            }
          }
        }
        .fxImg{
          display: block;width: 100%;height: 100%;object-fit: cover;
          animation-duration: 1s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          animation-play-state: paused;
          animation-delay: calc(var(--go)*-1s);
          animation-timing-function: linear;
          @media screen and (orientation: landscape){
            transform-origin: 0% 50%;
            animation-name:imgFn;
          }
          @media screen and (orientation : portrait){
            transform-origin: 50% 70%;
            animation-name:imgFn_app;
          }
        }
      }
      .col{
        align-items: stretch;position: relative;z-index: 5;
        margin-left: 56%;width: 44%;
        .msg{
          p{
            color: rgba(28, 30, 60, .2);
            line-height: 1.2;margin-top: .3rem;
          }
        }
      }
    }
    .clear{width: 100%;height: 15vw;}
    .inner{
      width: 100%;position: relative;z-index: 5;
      height: 200vh;
      .group{
        position: sticky;width: 100%;height: 100vh;left: 0;top: 0;
        overflow: hidden;padding: 7% 1.6rem;
        .items{
          position: absolute;top: 1.2rem;right: 1.6rem;
          display: flex;align-items: flex-start;
          justify-content: flex-start;flex-direction: column;
          .sliderDot{
            position: relative;line-height: 1.2;margin: .05rem 0;
            &>span{
              font-size: inherit;cursor: pointer;font-weight: 500;
              &:nth-of-type(1){
                color: rgba(255, 255, 255, 0.3);
              }
              &:nth-of-type(2){
                position: absolute;
                left: 0;top: 0;
                color: rgba(255, 255, 255, 1);
                clip-path: inset(0 100% 0 0 round 0);
                transition: all .6s var(--ease);
              }
            }
            &:hover{
              &>span{
                &:nth-of-type(2){
                  clip-path: inset(0 0 0 0 round 0);
                }
              }
            }
            &.on{
              &>span{
                &:nth-of-type(2){
                  clip-path: inset(0 0 0 0 round 0);
                }
              }
            }
          }
        }
        .msg{
          position: absolute;left: 1.6rem;bottom: 1.6rem;
          .sliderMsg{
            position: absolute;bottom: 0;left: 0;width: 4.8rem;
            h3{
              padding-bottom: .2rem;margin-bottom: .2rem;
              border-bottom: 1px solid rgba(255, 255, 255, .32);
              transition: opacity 1s var(--ease),transform 1s var(--ease),color .3s var(--ease);
              opacity: 0;transform-origin: 0 50%;
              transform: translate3d(0,.2rem,0);
              small{font-weight: 300;font-size: inherit;color: inherit;display: block;}
            }
            .layer-item{
              perspective: 5rem;
              .list{
                margin-bottom: .2rem;
                transition: opacity 1s var(--ease),transform 1s var(--ease),color .5s var(--ease),background-color .6s var(--ease);
                opacity: 0;transform-origin: 0 50%;
                @for $i from 1 through 20{
                  &:nth-child(#{$i}){
                    transform:rotateY(#{-1-$i*2deg}) rotateX(#{1+$i*2deg}) translate3d(0,#{.1+$i*.1rem},0);
                    transition-delay: #{$i*0.03s};
                  }
                }
                &:last-of-type{margin-bottom: 0;}
              }
            }
            &.on{
              h3{opacity: 1;transform: none;}
              .layer-item{
                .list{opacity: 1;transform: none;}
              }
            }
            &.out{
              h3{opacity: 0;transform: translate3d(0,-.3rem,0);}
              .layer-item{
                .list{opacity: 0;transform: translate3d(0,-.2rem,0);}
              }
            }
          }
        }
      }
      .fxStep{
        position: absolute;top: 48%;left: 0;height: 100vh;
        width: 100%;pointer-events: none;
      }
      .parent{
        position: absolute;width: 100%;pointer-events: none;
        height: 100vh;left: 0;bottom: 0;
        .clear{
          width: 100%;height: 3rem;z-index: 5;pointer-events: none;
          display: grid;grid-template-columns: repeat(9,1fr);position: absolute;bottom: -2px;left: 0;
          align-items: end;
          .chunk{
            background-size: 100vw 100%;height: 0;
            position: relative;overflow: hidden;
            transform-origin: 50% 100%;
            background-color: rgba(240, 243, 248, 1);
            .pic{
              display: block;width: 100vw;position: absolute;bottom: 0;
              background-repeat: no-repeat;left: 0;height: 56.25vw;
              background-position: center bottom;
              background-color: rgba(240, 243, 248, 1);
            }
          }
        }
      }
    }
  }
  .rowDetail{
    background-color: #fff;
    .inner{
      padding-top: 1.5rem;padding-bottom: 1rem;position: relative;
      .fixFn{
        position: absolute;pointer-events: none;width: 50%;
        top: .7rem;left: 1rem;height: calc(100% - 1rem);
        .return{
          position: absolute;top: 0;left: 0;pointer-events: painted;
          border: 1px solid rgba(21, 43, 217, .14);
          padding: 0;width: 1.3rem;height: .6rem;
          .txt{padding-left: .1rem;}
          .icon{
            transform: scaleX(-1);
            .rect{fill: var(--main);}
          }
        }
      }
      .group{
        width: 10rem;margin: 0 auto;
        h2{}
        .detail{
          *{font-size: inherit;color: var(--black);line-height: 1.5;}
          img{height: auto;display: block;margin: 0.35rem auto;max-width: 100%;width: 100%;}
        }
        .btm{
          margin-top: 1rem;padding: .3rem 0;
          border-top: 1px solid rgba(35, 55, 88, .3);
          display: grid;grid-template-columns: repeat(2,1fr);
          .prev{
            display: flex;justify-content: flex-start;
            align-items: center;
            .layer-btn{
              width: .48rem;height: .48rem;border-radius: .05rem;
              border: 1px solid rgba(21, 42, 211, .2);padding: 0;
              .icon{
                transform: scaleX(-1);
                .rect{fill: var(--main);}
              }
            }
            p{
              width: calc(100% - .5rem);
              color: rgba(65, 80, 110, .5);padding: 0 .15rem;
              transition: color .5s var(--ease);
            }
            &:hover{
              .layer-btn{
                &>.mask{
                  transform: translateX(0)!important;
                }
                .icon{
                  -webkit-mask-position-x: 0.32rem;
                  &.small{-webkit-mask-position-x: 0.22rem;}
                  &.tint{-webkit-mask-position-x: 0.15rem;}
                  .rect{
                    opacity: 1;fill: #fff!important;
                  }
                }
              }
              p{color: rgba(65, 80, 110, 1);}
            }
          }
          .next{
            display: flex;justify-content: flex-end;
            align-items: center;
            .layer-btn{
              width: .48rem;height: .48rem;border-radius: .05rem;
              border: 1px solid rgba(21, 42, 211, .2);padding: 0;
              .icon{
                .rect{fill: var(--main);}
              }
            }
            p{
              width: calc(100% - .5rem);text-align: right;
              color: rgba(65, 80, 110, .5);padding: 0 .15rem;
            }
            &:hover{
              .layer-btn{
                &>.mask{
                  transform: translateX(0)!important;
                }
                .icon{
                  -webkit-mask-position-x: 0.32rem;
                  &.small{-webkit-mask-position-x: 0.22rem;}
                  &.tint{-webkit-mask-position-x: 0.15rem;}
                  .rect{
                    opacity: 1;fill: #fff!important;
                  }
                }
              }
              p{color: rgba(65, 80, 110, 1);}
            }
          }
        }
      }
    }
  }
}
.news{
  .r1{
    background-color: #fff;
    .inner{
      padding: 1.2rem 0;
      .top{
        margin-bottom: .6rem;
        .tabBox{
          .tab{
            transition: color .5s var(--ease);
            &:hover{color: var(--main);}
            &.on{
              color: var(--main);
            }
          }
          .line{
            width: 1px;height: .36rem;
            background-color: var(--tint);
            margin: 0 .3rem;
          }
        }
        .right{
          width: 5rem;
        }
      }
      .mid{
        display: grid;grid-template-columns: repeat(3,1fr);
        gap: .5rem .3rem;
        .box{
          overflow: hidden;position: relative;
          .layer-above{
            mask-size: 100% 100%;position: relative;
            mask-position: center;
            .mk{
              width: 100%;height: 100%;object-fit: cover;
              position: absolute;left: 0;top: 0;z-index: 7;
              opacity: 0;transition: opacity .6s var(--ease);
            }
          }
          .msg{
            padding: .25rem;height: 100%;z-index: 8;
            display: flex;flex-direction: column;
            align-items: center;justify-content: space-between;
            &:before{
              background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%);
            }
            .wid-100{position: relative;z-index: 5;}
            .note{
              width: 100%;
              .lab{padding: 5px .15rem;display: inline-block;border-radius: 5px;background-color: rgba(255, 255, 255, 0.2);backdrop-filter: blur(0.2rem);}
              h3{
                width: 90%;
                small{display: block;}
              }
            }
          }
          .arrow{
            position: absolute;bottom: 0;right: 0;padding: 0;
            width: .48rem;height: .48rem;z-index: 8;
            background-color: #fff;border: 1px solid rgba(21, 42, 211, 0.2);
            .icon{
              height: .15rem;
              .rect{
                fill: var(--main);
              }
            }
          }
          @media screen and (orientation : landscape){
            &:hover{
              .layer-above{
                .mk{
                  opacity: 1;
                }
              }
              .arrow{
                &>.mask{
                  transform: translateX(0)!important;
                }
                .blueMask{
                  -webkit-mask-position: 50% 0;
                  mask-position: 50% 0;
                }
                .icon{
                  -webkit-mask-position-x: 0.32rem;
                  .rect{
                    opacity: 1;fill: #fff!important;
                  }
                }
              }
            }
          }
        }
      }
      .btm{
        padding: .6rem 0;position: relative;
        .pager{
          background-color: #fff;position: relative;z-index: 6;
          &>a{
            margin-right: .3rem;
            transition: color .5s var(--ease);
            &:hover{
              color: var(--main);
            }
          }
        }
        .line{
          @extend .layout-v-middle;
          left: 0;height: 1px;
          width: 100%;
          background-color: var(--tint);
        }
        .col{
          background-color: #fff;
          position: relative;z-index: 6;
          padding-left: .5rem;
        }
        .layer-set{
          width: 1.2rem;height: 1.2rem;
          .prevIcon{
            top: auto;bottom: 0;width: .7rem;height: .7rem;padding: 0;
            background-color: rgba(240,243,250);
            .icon{width: .32rem;height: .18rem;}
          }
          .nextIcon{
            bottom: auto;top: 0;width: .7rem;height: .7rem;padding: 0;
            .icon{width: .32rem;height: .18rem;}
          }
        }
      }
    }
  }
}
.recruit{
  background-color: rgba(240, 243, 248, 1);
  .r1{
    .inner{
      padding: 1.1rem 0 1.5rem 0;
      .group{
        display: grid;
        gap: .45rem .7rem;
        grid-template-columns: repeat(2,1fr);
        .box{
          background-color: rgba(248, 250, 255, 1);position: relative;
          padding: .7rem;border-radius: .1rem;overflow: hidden;
          .mask{
            @extend .full;opacity: 0;transform: scale(1.05);
            @extend .layer-move;--time:0.8s;
          }
          h2{position: relative;z-index: 5;b{transition: color .5s var(--ease);}}
          .msg{
            padding-bottom: .5rem;position: relative;z-index: 5;
            .layer-item{
              padding-left: .3rem;
            }
          }
          .btm{
            padding-top: .3rem;position: relative;z-index: 5;
            .layer-btn{
              width: 1.9rem;height: .66rem;
              .mak{background-color: #fff;}
              .icon{height: .22rem;}
            }
          }
          &:hover{
            .mask{opacity: 1;transform: none;}
            .bc{color: #fff;}
            .pColor{color: #fff;}
            .msg{
              .layer-item{
                .list{.dot{background-color: #fff;}}
              }
            }
            .btm{
              .layer-btn{
                .mak{
                  -webkit-mask-position: 0 0;
                  mask-position: 0 0;
                }
                .txt{color: var(--main);}
                .icon{
                  -webkit-mask-position-x: 0.32rem;
                  .rect{
                    opacity: 1;fill: var(--main)!important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.proCenter{
  .tabRow{
    background-color: rgba(244, 246, 250, 1);
    .inner{
      height: 1rem;
      display: grid;grid-template-columns: repeat(var(--col),1fr);
      .tab{
        height: 100%;position: relative;
        padding: 0 1rem;@extend .fxc;
        &>a{
          transition: color .5s var(--ease);height: 100%;
          color: rgba(28, 30, 60, 0.3);@extend .fxc;
          position: relative;z-index: 5;
          &:after{
            content: "";position: absolute;height: 2px;
            bottom: 0;left: 0;right: 0;margin: 0 auto;
            transform: scaleX(0);background-color: var(--main);
            transition: transform .7s var(--ease);
            width:100%;
          }
        }
        &.on{
          &>a{
            color: rgba(28, 30, 60, 1);
            &:after{
              transform: scaleX(1);
            }
          }
        }
        &:hover{
          &>a{
            color: rgba(28, 30, 60, 1);
            &:after{
              transform: scaleX(1);
            }
          }
        }
      }
    }
  }
  .r1{
    background-color: rgba(250, 252, 255, 1);
    .inner{
      padding-top: .6rem;
      display: grid;grid-template-columns: 3rem calc(100% - 3rem);
      .left{
        .topic{
          margin-bottom: .4rem;
          &>small{color: rgba(28, 30, 60, 0.5);display: block;line-height: 1;}
        }
        .group{
          .layer-downList{
            width: 2.5rem;padding: .2rem 0 .1rem 0;
            .name{
              cursor: pointer;
              h3{color: rgba(28, 30, 60, 0.7);transition: color .5s var(--ease);}
              .icon{
                width: .18rem;
                mask-repeat: repeat-x;
                mask-size: .18rem 100%;
                -webkit-mask-position-x: 0%;
                mask-image: url("/image/base/arrow.svg");
                //transition: all 1s steps(5);
                transition: all 1s var(--ease);
                .rect {
                  fill: rgba(21, 43, 217, 1);
                  transition: opacity .5s var(--ease) .2s, fill .5s var(--ease) .2s;
                }
              }
            }
            .child{
              overflow: hidden;
              .layer-item{
                padding: .2rem 0 .1rem .2rem;
                .list{
                  padding-left: .15rem;cursor: pointer;
                  .dot{transform: scale(0);transition: transform .5s var(--ease);}
                  p{color: rgba(28, 30, 60, 0.8);font-weight: 500;line-height: 1.5;transition: color .5s var(--ease),font-weight .5s var(--ease);}
                  &:hover{
                    .dot{transform: scale(1);}
                    p{color: var(--black);font-weight: 600;}
                  }
                }
              }
            }
            &.active{
              .name{
                h3{color: var(--black);}
                .icon{transform: rotate(-90deg);}
              }
            }
          }
        }
      }
      .right{
        padding-top: 0.6rem;
        padding-bottom: .3rem;
        &>.layer-above{
          margin-bottom: .8rem;
          .msg{
            padding: .8rem 0 .9rem 0;height: 100%;
            h3{b{display: block};}
            small{color: rgba(255, 255, 255, .2);}
          }
        }
        .content{
          display: grid;grid-template-columns: repeat(3,1fr);
          gap: .35rem;
          &>.box{
            overflow: hidden;position: relative;
            .layer-above{
              mask-size: 100% 100%;position: relative;
              mask-position: center;background-color: rgba(244, 246, 250, 1);
              .layer-photo{z-index: 9;}
              .mk{
                width: 100%;height: 100%;object-fit: cover;
                position: absolute;left: 0;top: 0;z-index: 7;
                transform: scale(1.05);
                opacity: 0;transition: opacity .6s var(--ease),transform .8s var(--ease);
              }
            }
            .msg{
              padding: .3rem .3rem;height: 100%;z-index: 8;
              display: flex;flex-direction: column;
              align-items: flex-start;justify-content: space-between;
              .tint{transition: color .5s var(--ease);}
              &:before{
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%);
              }
              .wid-100{position: relative;z-index: 5;}
              .note{
                width: 86%;
                .lab{padding: 5px .15rem;display: inline-block;border-radius: 5px;background-color: rgba(255, 255, 255, 0.2);backdrop-filter: blur(0.2rem);}
                h3{
                  width: 100%;transition: color .5s var(--ease);
                }
              }
            }
            .arrow{
              position: absolute;bottom: 0;right: 0;padding: 0;
              width: .55rem;height: .55rem;z-index: 8;
              background-color: transparent;border: 1px solid rgba(21, 42, 211, .2);
              .icon{
                height: .15rem;
                .rect{
                  fill: var(--main);
                }
              }
            }
            @media screen and (orientation : landscape){
              &:hover{
                .layer-above{
                  .mk{opacity: 1;transform: scale(1);}
                  .msg{
                    .tint{color: rgba(255,255,255,0.3);}
                    .note{
                      h3{color: #fff;}
                    }
                  }
                }
                .arrow{
                  &>.mask{
                    transform: translateX(0)!important;
                  }
                  .blueMask{
                    -webkit-mask-position: 50% 0;
                    mask-position: 50% 0;
                  }
                  .icon{
                    -webkit-mask-position-x: 0.32rem;
                    .rect{
                      opacity: 1;fill: #fff!important;
                    }
                  }
                }
              }
            }
          }
        }
        .btm{
          padding: 1.4rem 0;
        }
      }
    }
  }
}
.proDetail{
  .r1{
    .bg{
      background-color: #f0f4f9;overflow: hidden;
      .sign{
        position: absolute;
        top: 1.1rem;width: 100%;
        left: 0;
      }
    }
    .inner{
      padding-top: 2.2rem;
      .part{
        padding: 0 0 0 1.2rem;align-items: end;
        display: grid;justify-content: space-between;
        grid-template-columns: 50% 48%;
      }
      .group{
        position: relative;margin: 2rem 0 2.3rem 0;
        .img_1{
          position: absolute;right: 0;top: 0;
          .layer-img{
            box-shadow: 0 .4rem 1rem -4px rgba(107,146,201,0.26);
          }
        }
        .img_2{
          position: absolute;left: 5%;bottom: 5%;
          .layer-img{
            box-shadow: 0 .4rem 1rem -4px rgba(107,146,201,0.26);
          }
        }
        .txt{
          display: flex;flex-direction: column;
          align-items: center;justify-content: center;
          font-size: 14.6vw;line-height: .9;
          color: #b0cbe9;
        }
      }
      .other{
        display: grid;grid-template-columns: repeat(4,1fr);
        gap: .4rem;
        .box{
          width: 100%;padding-bottom: 100%;border-radius: .05rem;
          background-color: #fff;position: relative;
          &:nth-of-type(2n){background-color: rgba(229, 239, 255, 1);}
          .full{padding-top: 5%;}
          .img{margin-bottom: .35rem;height: 1.7rem;max-width: 2.5rem;object-fit: contain;}
        }
      }
      .note{
        height: 3.34rem;
        display: flex;justify-content: flex-end;
        align-items: center;
      }
    }
    .parent{
      position: absolute;width: 100%;
      height: 100vh;left: 0;bottom: 0;
      .clear{
        width: 100%;height: 3rem;z-index: 5;pointer-events: none;
        display: grid;grid-template-columns: repeat(9,1fr);position: absolute;bottom: -2px;left: 0;
        align-items: end;
        .chunk{
          background-size: 100vw 100%;height: 0;
          position: relative;overflow: hidden;
          transform-origin: 50% 100%;
          background-color: rgba(240, 243, 248, 1);
          .pic{
            display: block;width: 100vw;position: absolute;bottom: 0;
            background-repeat: no-repeat;left: 0;height: 56.25vw;
            background-position: center bottom;
            background-color: rgba(240, 243, 248, 1);
          }
        }
      }
    }
  }
  .rowData{
    background-color: rgba(240, 243, 248, 1);
    .inner{
      padding-top: .4rem;
      .box{
        display: grid;padding: 1.2rem 0;
        grid-template-columns: 50% 45%;
        justify-content: space-between;
        h4{
          b{color: var(--main);}
        }
      }
    }
  }
  .rowThick{
    background-color: rgba(240, 243, 248, 1);
    .bg{
      .pic{
        @extend .layout-middle;
        background-position: top center;
        width: calc(100% - .2rem);
        height: calc(100% - .2rem);
      }
    }
    .inner{
      padding-top: 1.2rem;padding-bottom: .1rem;
      .group{
        position: relative;padding-top: 1px;
        margin: 1.2rem auto 1.4rem auto;
        .img{height: 5rem;display: block;margin-top: .2rem}
        .table{
          position: absolute;top: 0;right: 0;
          background-color: #fff;border-radius: .05rem;
          width: 6.5rem;
          border-top: 1px solid rgba(229, 239, 255, 0.6);
          border-left: 1px solid rgba(229, 239, 255, 0.6);
          tr{
            height: .72rem;
            th{
              @extend .f-22;text-align: center;font-weight: 600;
              padding: 0 .5rem;
              border-bottom: 1px solid rgba(229, 239, 255, 0.6);
              border-right: 1px solid rgba(229, 239, 255, 0.6);
            }
            td{
              @extend .f-18;text-align: center;
              border-bottom: 1px solid rgba(229, 239, 255, 0.6);
              border-right: 1px solid rgba(229, 239, 255, 0.6);
              @extend .poBold;
            }
          }
        }
      }
      .part{
        padding: 1.6rem 0 2.4rem 1.5rem;
        width: calc(100% - .2rem);margin:  0 auto;
        background-position:bottom center;
        background-size: 100%;background-repeat: no-repeat;
        height: 10.8rem;
        .box{
          background-color: rgba(255, 255, 255, .75);
          border-radius: .05rem;width: 7rem;height: 6.5rem;
          display: flex;align-items: flex-start;
          justify-content: center;flex-direction: column;
          padding: 0 .75rem .3rem .75rem;
          h3{
            line-height: 1.2;
            b{color: var(--main);}
          }
        }
      }
    }
  }
  .rowSlider{
    height: 100vh;overflow: hidden;position: relative;z-index: 5;
    &>svg{position: absolute;left: 0;top: 0;}
    .sticky{
      height: 100vh;position: sticky;left: 0;top: 0;
      width: 100%;overflow: hidden;
      &>.bg{
        @extend .full;z-index: 1;pointer-events: none;
        &.fixBg{
          position: fixed;width: 100%;height: 100%;left: 0;top: 0;
          visibility: hidden;
          &.showImg{
            visibility: visible;
          }
        }
      }
      &>.inner{position: relative;z-index: 3;}
    }
    .bg{
      .box{
        @extend .full;z-index: 10;overflow: hidden;opacity: 0;
        transition: transform 2s var(--ease),opacity 1s var(--ease);
        .after{
          @extend .full;width: 100vw;
          z-index: 4;background-size: cover;
          transform: scale3d(1.1,1.1,1.1);
          transition: transform 2s var(--ease),opacity 1s var(--ease);
          &:before{
            content: "";@extend .full;z-index: 1;pointer-events: none;
            background: linear-gradient(180deg,rgba(0,0,0,0.1) 50%,rgba(0,0,0,.8) 100%);
          }
        }
        .before{
          mask-image: url("/image/base/mask.svg");
          mask-repeat: no-repeat;
          mask-size: 12rem;
          mask-position: right bottom;
          z-index: 5;right: 0;bottom: 0;position: absolute;
          width: 100%;height: 100%;
          &:after{
            content: "";@extend .full;z-index: 10;
            background-color: rgba(255,255,255 , 0);
            backdrop-filter: blur(0rem);
            transition: all 2s var(--ease);
          }
          .pic{
            width: 100vw;position: absolute;
            height: 100vh;bottom: 0;right: 0;
            transform: scale3d(1.15,1.15,1.15);
            transform-origin: 100% 100%;
            transition: transform 2.2s var(--ease);
          }
        }
        &.on{
          opacity: 1;z-index: 11;
          .before{
            &:after{
              background-color: rgba(103,116,223 , 0.1);
              backdrop-filter: blur(0.3rem);
            }
            .pic{transform: scale3d(1,1,1);}
          }
          .after{
            transform: scale3d(1,1,1);
          }
        }
      }
    }
    .inner{
      height: 100%;position: relative;
      width: calc(100% - 2rem);margin: 0 auto;
      .group{
        width: 100%;padding-top: 1.4rem;
        display: flex;justify-content: flex-end;
        align-items: flex-start;
        .items{
          display: flex;align-items: flex-start;
          justify-content: flex-start;flex-direction: column;
          .sliderDot{
            position: relative;line-height: 1.2;
            &>span{
              font-size: inherit;cursor: pointer;font-weight: 500;
              &:nth-of-type(1){
                color: rgba(255, 255, 255, 0.5);
              }
              &:nth-of-type(2){
                position: absolute;
                left: 0;top: 0;
                color: rgba(255, 255, 255, 1);
                clip-path: inset(0 100% 0 0 round 0);
                transition: all .6s var(--ease);
              }
            }
            &:hover{
              &>span{
                &:nth-of-type(2){
                  clip-path: inset(0 0 0 0 round 0);
                }
              }
            }
            &.on{
              &>span{
                &:nth-of-type(2){
                  clip-path: inset(0 0 0 0 round 0);
                }
              }
            }
          }
        }
      }
      .btm{
        position: absolute;bottom: 1.2rem;
        width: 100%;left: 0;
      }
    }
    .clear{
      width: 100%;height: 3rem;z-index: 5;pointer-events: none;
      display: grid;grid-template-columns: repeat(9,1fr);position: absolute;bottom: -2px;left: 0;
      align-items: end;
      .chunk{
        background-size: 100vw 100%;height: 0;
        position: relative;overflow: hidden;
        transform-origin: 50% 100%;
        .pic{
          display: block;width: 100vw;position: absolute;bottom: 0;
          background-repeat: no-repeat;left: 0;height: 3rem;
          background-position: center bottom;
        }
      }
    }
  }
}
.contact{
  .contactRow{
    height: 100vh;
    .bg{
      .mask{
        @extend .full;z-index: 10;
        background-color: rgba(255, 255, 255, 0);
        opacity: 0;backdrop-filter: blur(.3rem);
        transition: opacity .6s var(--ease);
        &.active{
          opacity: 1;
        }
      }
    }
    #fullPage{
      position: relative;width: 100%;height: 100%;
      z-index: 5;
    }
    .inner{
      position: absolute;left: 0;right: 0;margin: 0 auto;
      height: 100%;
      display: grid;grid-template-columns: 50% 50%;
      grid-template-rows: 100%;pointer-events: none;
      &.go{
        pointer-events: painted;
        .right{
          .btm{border-color: rgba(255, 255, 255, .3)}
        }
        .layer-topic{
          p{opacity: 1;transform: translate3d(0,0,0);}
          .letter{
            opacity: 1;transform: translate3d(0,0,0);
          }
        }
      }
      .left{
        position: relative;
        .layer-btn{
          width: 56%;
          position: absolute;top: 82%;
          height: 15%;left: .8rem;
          .icon{
            width: .5rem;
            mask-size: 0.5rem 100%;
          }
          &:hover{
            .icon{ -webkit-mask-position-x: 0.5rem;}
          }
        }
      }
      .right{
        padding-left: 3%;position: relative;
        display: flex;flex-direction: column;
        align-items: flex-start;justify-content: center;
        .layer-item{
          .list{
            padding-left: .25rem;
            .icon{
              width: .12rem;margin: 0 .15rem;
            }
          }
        }
        .phone{
          background-color: rgba(255, 255, 255, .15);
          border-radius: .5rem;
          padding: .1rem 0.25rem;
          margin: .3rem 0;
        }
        .btm{
          position: absolute;width: 100%;left: 3%;bottom: 0;
          border-top: 1px solid rgba(255, 255, 255, .0);
          height: 18%;
          display: flex;justify-content: space-between;
          align-items: center;
          .col{
            display: flex;justify-content: flex-start;
            align-items: center;
            .layer-share{
              margin-right: .18rem;
              .layer-icon{
                width: .5rem;height: .5rem;
                background-color: rgba(255, 255, 255, .1);
                border-radius: 0.05rem;
              }
              &:hover{
                .layer-icon{
                  background-color: rgba(21, 42, 211, .1);
                }
              }
            }
          }
          .imgBox{
            display: grid;grid-template-columns: repeat(2,1rem);
            grid-template-rows: 1rem;gap: 0 .2rem;
            &>img{
              width: 100%;
            }
          }
        }
      }
      .scr{
        position: absolute;bottom: .5rem;
        right: 100%;width: 1rem;
        @extend .fxc;flex-direction: column;
        cursor: pointer;pointer-events: painted;
        .icon{
          display: block;height: .32rem;position: relative;z-index: 6;
          margin-bottom: .2rem;
          animation: scrollFn 1s var(--ease) infinite alternate;
          animation-fill-mode: both;
          .rect{
            fill: #fff;opacity: .4;
            transition: opacity .5s var(--ease);
            &:nth-child(1){transition-delay: 0.2s;}
            &:nth-child(2){transition-delay: 0.2s;}
            &:nth-child(3){transition-delay: 0.2s;}
            &:nth-child(4){transition-delay: 0.3s;}
            &:nth-child(5){transition-delay: 0.3s;}
            &.after{opacity: 0.15;transition-delay: 0.1s;}
            &.before{opacity: 1;}
          }
        }
      }
    }
    .content{
      position: absolute;width: 100%;z-index: 10;
      height: 100%;left: 0;top: 0;right: 0;margin: 0 auto;
      display: flex;justify-content: space-between;
      align-items: flex-end;padding: 5% 0;pointer-events: none;
      &.go{
        pointer-events: painted;
        .layer-topic{
          p{opacity: 1;transform: translate3d(0,0,0);}
          .letter{
            opacity: 1;transform: translate3d(0,0,0);
          }
        }
      }
      .return{
        position: absolute;top: 18%;left: 0;
        border: 1px solid rgba(255, 255, 255, .54);
        background-color: transparent;
        padding: 0;width: 1.3rem;height: .6rem;
        .txt{padding-left: .1rem;}
        .icon{
          transform: scaleX(-1);
          .rect{fill: var(--white);}
        }
        &:hover{
          border-color: transparent;
        }
      }
      .col{
        width: calc(50% - .8rem);
        &:nth-of-type(2){
          width: calc(50% - .4rem);
        }
        .layer-form{
          .inRow{
            .layer-btn{width: 3rem;height: .66rem;}
            .inCol{
              .inTxt{
                height: .64rem;
                &::placeholder{
                  color: rgba(255, 255, 255, .5);
                }
              }
            }
          }
        }
      }
    }
  }
}
.application{
  .r1{
    background-color: #fff;
    .bg{
      .sign{
        width: 100%;position: absolute;
        left: 0;top: 0;
      }
    }
    .inner{
      padding: 1.5rem 0 1rem 0;
      .layer-topic{
        overflow: hidden;
        display: flex;flex-direction: column;
        align-items: flex-start;justify-content: flex-start;
        &>p{
          position: relative;
          &:after{
            content: "";
            background-color: rgba(28, 30, 60, 0.08);
            height: 1px;width: 100vw;
            @extend .layout-v-middle;
            left: calc(100% + .2rem);
          }
        }
      }
      .group{
        .swiper{
          .swiper-wrapper{
            .swiper-slide{
              display: grid;justify-content: space-between;
              grid-template-columns: repeat(5,1.7rem);
              grid-template-rows: repeat(3,1rem);
              gap: .3rem 0;
              .iconBox{
                &>img{
                  display: block;width: 100%;height: 100%;
                  object-fit: contain;opacity: 0.6;
                  filter: grayscale(100%) invert(92%) sepia(68%) saturate(6994%) hue-rotate(177deg) brightness(79%) contrast(25%);
                  transition: all .5s var(--ease);
                }
              }
            }
          }
        }
        .btm{
          display: flex;margin-top: .8rem;
          justify-content: space-between;
          align-items: center;
          .line{
            background-color: rgba(28, 30, 60, 0.08);
            height: 1px;width: 100%;
          }
          .pager{
            height: .4rem;padding-left: .5rem;
            display: flex;justify-content: flex-end;
            align-items: center;
            .dot{
              width: .08rem;height: .08rem;margin-left: .28rem;
              background-color: rgba(124, 142, 174, 1);cursor: pointer;
              transition: background-color .6s var(--ease);
              &.on{
                background-color: var(--main);
              }
            }
          }
        }
      }
    }
    .part{
      padding-bottom: 3.2rem;position: relative;
      .layer-photo{
        width: 11rem;position: relative;z-index: 6;
      }
      .msg{
        position: absolute;width: 11rem;height: 6rem;
        right: 0;top: 1.6rem;background-color: var(--main);
        border-radius: .05rem;
        padding: 0 1.6rem 0 3.5rem;
        display: flex;flex-direction: column;
        align-items: flex-start;
        justify-content: center;
      }
    }
  }
}
.tech{
  .r1{
    background-color: rgba(240, 243, 248, 1);overflow: hidden;
    .inner{
      padding: 1.2rem 0 1.4rem 0;
      .top{
        position: relative;margin-bottom: 1rem;
        .layer-set{
          position: absolute;right: 0;top: 0;
          .prevIcon{}
          .nextIcon{
            width: 1.6rem;height: 1.6rem;
            right: auto;left: .8rem;top: .8rem;bottom: auto;
          }
        }
      }
      .group{
        position: relative;
        .sign{
          top: 1.3rem;position: absolute;
          width: calc(100% + 2rem);left: -1rem;
        }
        .slider{
          position: relative;z-index: 5;
          .photo{
            position: relative;height: 5rem;
            margin-bottom: .5rem;
            .pic{
              position: absolute;
              height: 100%;width: 100%;
              display: flex;align-items: flex-start;
              perspective: 5rem;
              justify-content: center;left: 0;top: 0;opacity: 0;
              transition: opacity 1.2s var(--ease);
              .img{
                height: 7rem;object-fit: contain;
                display: block;
                transition: opacity 1.2s var(--ease),transform 1.2s var(--ease),color .5s var(--ease),background-color .6s var(--ease);
                opacity: 0;transform-origin: 0 50%;
                transform: rotateY(14deg) scale(.8) translate3d(-100%,0,0);
              }
              &.on{
                opacity: 1;
                .img{opacity: 1;transform: none;}
              }
              &.in{
                opacity: 1;
                .img{opacity: 1;transform: none;}
              }
              &.out{
                .img{
                  opacity: 0;
                  transform: rotateY(-14deg) scale(.8) translate3d(100%,0,0);
                }
              }
            }
          }
          .msg{
            position: relative;z-index: 6;
            .sliderMsg{
              text-align: center;position: absolute;
              width: 100%;left: 0;top: 0;
              opacity: 0;transition: opacity 1.2s var(--ease);
              &:nth-of-type(1){position: relative;}
              h3{
                transition: opacity 1.2s var(--ease),transform 1.2s var(--ease),color .5s var(--ease),background-color .6s var(--ease);
                opacity: 0;transform-origin: 0 50%;
                transform:translate3d(0,.5rem,0);
              }
              p{
                color: rgba(28, 30, 60, .2);line-height: 1.2;margin-top: .2rem;
                transition: opacity 1.2s var(--ease),transform 1.2s var(--ease),color .5s var(--ease),background-color .6s var(--ease);
                opacity: 0;transform-origin: 0 50%;
                transform:translate3d(0,.6rem,0);
              }
              &.on{
                opacity: 1;
                h3{opacity: 1;transform: none;}
                p{opacity: 1;transform: none;}
              }
              &.in{
                opacity: 1;
                h3{opacity: 1;transform: none;}
                p{opacity: 1;transform: none;}
              }
              &.out{
                h3{
                  opacity: 0;transform:translate3d(0,-.6rem,0);
                }
                p{
                  opacity: 0;transform:translate3d(0,-.5rem,0);
                }
              }
            }
          }
        }
      }
    }
  }
  .r2{
    background-color: rgba(255,255,255, 1);overflow: visible;
    z-index: 8;
    .bg{
      .sign{
        position: absolute;height: 8.6rem;
        bottom: -1rem;left: -1rem;
      }
    }
    .inner{
      padding: 1rem 0 1.6rem 0;
      .top{
        position: relative;margin-bottom: 1.2rem;
        .layer-set{
          position: absolute;right: 0;top: 0;
          .prevIcon{
            background-color: rgba(240, 243, 248, 1);
          }
        }
      }
      .group{
        display: grid;grid-template-columns: calc(50% - 1.9rem) 3.8rem calc(50% - 1.9rem);
        .mid{
          display: flex;justify-content: space-between;
          align-items: center;
          .yearBox{
            height: 29.4vw;width: 2.2rem;overflow: hidden;position: relative;
            mask: linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%);
            .years{
              width: 100%;display: flex;position: absolute;
              left: 0;top: 12.6vw;
              flex-direction: column;align-items: flex-start;
              justify-content: flex-end;
              transition: transform .5s var(--ease);
              &>li{
                width: 100%;cursor: pointer;
                height: 4.2vw;line-height: 1;text-align: right;
                transform: scale(0.26);transform-origin: 98% 50%;
                transition: all .5s var(--ease);
                &:hover{color: var(--main);transform: scale(.4);}
                &.on{
                  color: var(--main);transform: scale(1);
                  font-weight: 500;
                }
              }
            }
          }
          .layer-icon{
            width: 1.6rem;@extend .fxc;
            .icon{
              display: block;width: .44rem;position: relative;z-index: 6;
              mask-repeat: repeat-x;
              mask-size: .44rem 100%;
              -webkit-mask-position-x: 0%;
              mask-image: url("/image/base/arrow.svg");
              transition: all 1s var(--ease);
              .rect{
                fill: var(--main);
                transition: opacity .5s var(--ease) .2s,fill .5s var(--ease) .2s;
              }
            }
          }
        }
        .right{
          .rect{
            .swiper-wrapper{
              .swiper-slide{
                .part{
                  .layer-item{
                    padding-bottom: .2rem;opacity: 0;
                    transition: opacity .6s var(--ease);
                    .list{margin-bottom: .3rem;}
                  }
                  .layer-photo{
                    &:after{
                      content: "";@extend .full;pointer-events: none;
                      background: linear-gradient(141deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
                      transition: opacity .6s var(--ease);opacity: 1;
                    }
                  }
                }
                &.swiper-slide-active{
                  .part{
                    .layer-item{
                      opacity: 1;
                    }
                    .layer-photo{
                      &:after{opacity: 0;}
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .r3{
    background-color: rgba(240, 243, 248, 1);overflow: hidden;
    .inner{
      padding: 1.6rem 0 2.2rem 0;
      .top{
        position: relative;margin-bottom: 1rem;
        .layer-set{
          position: absolute;right: 0;top: 0;
          .prevIcon{
            background-color: rgba(255, 255, 255, 1);
          }
        }
      }
      .group{
        position: relative;
        &:before{
          content: "";position: absolute;
          left: 0;width: 1.5rem;top: 0;
          height: 100%;z-index: 10;pointer-events: none;
          background: linear-gradient(-90deg,rgba(240, 243, 248, 0) 0%,rgba(240, 243, 248, 1) 90%);
        }
        &:after{
          content: "";position: absolute;
          right: 0;width: 1.5rem;top: 0;
          height: 100%;z-index: 10;pointer-events: none;
          background: linear-gradient(90deg,rgba(240, 243, 248, 0) 0%,rgba(240, 243, 248, 1) 90%);
        }
        .swiper-slide{
          width: 3rem;background-color: rgba(255, 255, 255, .3);
          box-shadow: 0 .6rem .8rem -4px rgba(82,106,128,0.31);
          @extend .flex-col-cc;
          .photo{
            padding: .25rem .25rem 0 .25rem;height: 3.6rem;
            width: 100%;display: block;
            &>img{
              display: block;height: 100%;width: 100%;
              object-fit: contain;
            }
          }
          h3{
            padding: .4rem 5%;display: block;
          }
        }
      }
    }
  }
}
.about{
  .r1{
    .bg{
      background-color: rgba(240, 243, 248, 1);
      .sign{
        width: 100%;position: absolute;
        left: 0;top: 0;
      }
    }
    .inner{
      padding-bottom: .35rem;
      .group{
        height: 100vh;width: 100%;
        @extend .fxc;
        .box{
          height: 45%;min-width: 7rem;
          padding: .48rem 1rem .3rem 1rem;
          background-color: rgba(255, 255, 255, .8);
          backdrop-filter: blur(.3rem);
          h2{
            text-align: center;line-height: 1.2;
          }
          p{
            color: rgba(28, 30, 60, .2);text-align: center;
          }
        }
      }
      .part{
        width: calc(100% - .7rem);
        margin: 0 auto;background-color: rgba(255, 255, 255, 1);
        border-radius: .05rem;
        padding: 1.25rem;
        .top{
          display: grid;
          grid-template-columns: 5.6rem calc(100% - 5.6rem);
          .left{
            border-bottom: 1px solid rgba(28, 30, 60, .1);
            border-right: 1px solid rgba(28, 30, 60, .1);
            border-bottom-right-radius: .1rem;
            padding-bottom: .8rem;
            display: flex;align-items: flex-end;
            justify-content: flex-start;
          }
          .right{
            border-bottom: 1px solid rgba(28, 30, 60, .1);
            border-left: 1px solid rgba(28, 30, 60, .1);
            border-bottom-left-radius: .1rem;
            padding-top: .6rem;padding-left: 2rem;
          }
        }
        .mid{
          .items{
            display: grid;
            grid-template-columns: repeat(var(--col),auto);
            gap: 0 1.2rem;
            .list{
              position: relative;padding-right: .4rem;
              padding-top: 2.5rem;
              .img{
                position: absolute;top: .8rem;
                right: 0;
              }
              .countFn{
                align-items: flex-end;
                .count{margin-right: .15rem;}
                small{@extend .poBold;line-height: 2.5;}
              }
            }
          }
        }
      }
    }
  }
  .r2{
    z-index: 2;height: 100vh;
    .inner{
      height: 100%;
      @extend .fxs;
      .group{
        padding: 1.2rem 0.9rem 1rem .9rem;
        background-color: rgba(255, 255, 255, .8);backdrop-filter: blur(.3rem);
        border-radius: .05rem;width: 7rem;
        display: flex;justify-content: flex-start;
        align-items: flex-start;flex-direction: column;
        h2{margin-bottom: 1.5rem}
      }
    }
  }
  .r3{
    background-color: rgba(240, 243, 248, 1);
    .bg{
      background: linear-gradient(180deg,rgba(31,117,204,0) 20%,rgba(31,117,204,1) 100%);
      .p1{position: absolute;bottom: 5.5rem;left: 0;}
      .p2{position: absolute;bottom: 0;right: 0;}
    }
    .inner{
      padding-top: 1.8rem;padding-bottom: 1.5rem;
      .group{
        .top{
          .left{
            padding-bottom: 1rem;
            display: flex;align-items: flex-end;
            justify-content: flex-start;
          }
        }
        .mid{
          gap: 0 .12rem;
          display: grid;grid-template-columns: repeat(4,1fr);
          .box{
            padding: .4rem;background-color: #fff;overflow: hidden;
            border-radius: .05rem;position: relative;
            .pic{
              @extend .full;opacity: 0;
              transition: opacity .7s var(--ease);
            }
            .layer-topic{
              padding-bottom: .3rem;position: relative;z-index: 5;
              border-bottom: 1px solid rgba(28, 30, 60, .1);
              h2{transition: color .5s var(--ease);}
            }
            .icon{
              width: 100%;height: 1.5rem;object-fit: contain;
              margin: .4rem 0 .6rem 0;display: block;position: relative;z-index: 5;
            }
            h3{text-align: left;width: 100%;position: relative;z-index: 5;}
            &:hover{
              .pic{opacity: 1;}
              .layer-topic{
                border-color: rgba(255, 255, 255, .5);
                h2{color: #fff;}
                p{color: #fff;}
              }
              .icon{opacity: 0;}
              h3{
                color: #fff;
              }
            }
          }
        }
      }
    }
    .part{
      padding-top: 1.8rem;padding-bottom: 2rem;
      position: relative;z-index: 5;
      .group{
        position: relative;
        .slider{
          width: 9rem;margin: 0 auto;position: relative;
          .box{
            position: relative;height: 4.7rem;z-index: 1;
            border-radius: .05rem;width: 100%;
            .sliderPic{
              height: 100%;position: absolute;
              left: 0;top: 0;width: 100%;
              opacity: 0;overflow: hidden;
              .photo{
                width: 9rem;height: 100%;background-color: #000;
                position: absolute;left: 0;top: 0;
                clip-path:inset(0 0 0 0 round 5px);
                transition: all 1.2s var(--picEase);
                .pic{
                  display: block;width: 100%;height: 100%;
                  transform: scale(1.1);
                  transition: opacity 1s var(--picEase),transform 2s var(--ease);
                }
              }
              &.on{
                opacity: 1;z-index: 10;
                .pic{
                  transform: scale(1);
                }
              }
              &.in{
                opacity: 1;
                .pic{transform: scale(1);}
              }
              &.out{
                opacity: 1;z-index: 10;
                .photo{
                  clip-path:inset(0 100% 0 0 round 5px);
                  .pic{
                    opacity: 0.5;
                  }
                }
              }
            }
          }
          .msg{
            position: absolute;width: 100%;pointer-events: none;
            bottom: 0;left: 0;height: 100%;z-index: 5;
            .sliderMsg{
              padding: .4rem 0;position: absolute;opacity: 0;
              bottom: 0;left: 0;width: 100%;z-index: 10;
              transition: opacity .8s var(--ease);
              h3{
                line-height: 1;display: flex;justify-content: center;
                align-items: center;
                .letter{
                  transition: opacity 1.2s var(--picEase),transform 1.2s var(--ease),color .3s var(--ease);
                  opacity: 0;transform-origin: 0 50%;
                  @for $i from 1 through 20{
                    &:nth-child(#{$i}){
                      transform: translate3d(#{15+$i*8px},0,0) rotate(#{$i*1deg});
                      transition-delay: #{$i*0.02s};
                    }
                  }
                }
              }
              &.on{
                opacity: 1;
                h3{
                  .letter{
                    opacity: 1;transform: translate3d(0,0,0);
                  }
                }
              }
              &.in{
                opacity: 1;
                h3{
                  .letter{
                    opacity: 1;transform: translate3d(0,0,0);
                  }
                }
              }
              &.out{
                opacity: 0;
              }
            }
          }
        }
        .set{
          width: 100%;padding: .4rem 0;
          .line{
            margin: 0 .1rem;display: block;
          }
          small{color: rgba(255,255,255,0.5);}
        }
        .layer-set{
          position: absolute;right: 0;top: 0;
          .prevIcon{
            background-color: rgba(240, 242, 252, 1);
          }
        }
      }
    }
    .parent{
      position: absolute;width: 100%;
      height: 100vh;left: 0;bottom: 0;
      .clear{
        width: 100%;height: 3rem;z-index: 5;pointer-events: none;
        display: grid;grid-template-columns: repeat(9,1fr);position: absolute;bottom: -2px;left: 0;
        align-items: end;
        .chunk{
          background-size: 100vw 100%;height: 0;
          position: relative;overflow: hidden;
          transform-origin: 50% 100%;
          background-color: rgba(255, 255, 255, 1);
          .pic{
            display: block;width: 100vw;position: absolute;bottom: 0;
            background-repeat: no-repeat;left: 0;height: 56.25vw;
            background-position: center bottom;
            background-color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
  .r4{
    min-height: 100vh;
    .bg{}
    .inner{
      padding-top: 1.2rem;padding-bottom: 2.4rem;
      .top{
        display: flex;justify-content: space-between;
        align-items: flex-end;margin-bottom: 1.15rem;
        .left{
          display: flex;align-items: flex-end;
          justify-content: flex-start;
        }
        .right{
          width: 5.8rem;
        }
      }
      .group{
        display: grid;position: relative;
        grid-template-columns: 5.94rem 4.5rem calc(100% - 4.5rem - 5.94rem);
        grid-template-rows: 30vw;
        .left{
          position: relative;width: 100%;
          .box{
            mask-size: 100% 100%;mask-repeat: no-repeat;
            width: 100%;height: 100%;
            position: absolute;left: 0;top: 0;
            .sliderPic{
              @extend .full;opacity: 0;overflow: hidden;
              transition: opacity 1.2s var(--ease);
              .pic{@extend .full;transform:scale(1.05);transition: transform 1.2s var(--ease);}
              &.on,&.in{
                opacity: 1;
                .pic{transform: none;}
              }
              &.out{
                opacity: 0;
                .pic{transform: scale(1.1);}
              }
            }
          }
          .sign{
            width: 7.2rem;height: 6.55rem;object-fit: contain;
            position: relative;pointer-events: none;z-index: 6;
            left: -0.6rem;
          }
        }
        .mid{
          padding-left: 2%;
          .yearBox{
            height: 30vw;width: 100%;overflow: hidden;position: relative;
            .years{
              position: absolute;width: 100%;left: 0;
              top: 10vw;transition: transform 1s var(--ease);
              &>li{
                color: rgba(21, 43, 217, .1);cursor: pointer;
                height: 10vw;@extend .fxc;line-height: 1;
                transition: color .7s var(--ease);
                &:hover{color: rgba(21, 43, 217, 1);}
                &.on{
                  color: rgba(21, 43, 217, 1);pointer-events: none;
                }
              }
            }
          }
        }
        .right{
          position: relative;
          .sliderMsg{
            @extend .full;
            display: flex;flex-direction: column;
            align-items: flex-start;justify-content: center;
            .list{
              margin-bottom: .25rem;
              transition: opacity .8s var(--ease),transform .8s var(--ease),color .5s var(--ease),background-color .6s var(--ease);
              opacity: 0;transform-origin: 0 50%;
              transform:translate3d(0,.2rem,0);
              @for $i from 1 through 20{
                &:nth-child(#{$i}){
                  transition-delay: #{$i*0.1s};
                }
              }
              &:last-of-type{
                margin-bottom: 0;
              }
            }
            &.on{
              .list{opacity: 1;transform: none;}
            }
            &.out{
              .list{
                opacity: 0;transform: translate3d(0,-.2rem,0);
              }
            }
          }
        }
        .layer-set{
          position: absolute;
          bottom: -.8rem;right: -0.2rem;
          .prevIcon{
            background-color: rgba(240, 243, 248, 1);
          }
        }
      }
    }
  }
  .r5{
    background-color: rgba(240, 243, 248, 1);
    .bg{
      .pic{opacity: 0.7}
    }
    .inner{
      padding-top: 1.2rem;padding-bottom: 1rem;
      .top{
        display: flex;justify-content: space-between;
        align-items: flex-end;margin-bottom: .9rem;
        .left{
          display: flex;align-items: flex-end;
          justify-content: flex-start;
        }
        .right{
          .tabItem{
            display: grid;grid-template-columns: repeat(var(--col),auto);
            gap: 0 .6rem;
            &>li{
              color: rgba(28, 30, 60, .5);
              padding: .2rem 0;position: relative;
              cursor: pointer;
              &:after{
                content: "";position: absolute;width: 100%;
                left: 0;bottom: 0;height: 2px;background-color: var(--main);
                transform: scaleX(0);transform-origin: 50% 50%;
                transition: transform .5s var(--ease);
              }
              &:hover{color: rgba(28, 30, 60, 1);}
              &.on{
                color: rgba(28, 30, 60, 1);
                &:after{transform: scaleX(1);}
              }
            }
          }
        }
      }
      .group{
        position: relative;perspective: 5rem;
        .swiper{
          position: absolute;width: 100%;left: 0;top: 0;
          opacity: 0;pointer-events: none;
          transform: translate3d(0,0.2rem,0.2rem) rotateX(5deg);
          transform-origin: 0 0;
          transition: transform .8s var(--ease);
          &:first-of-type{position: relative;}
          &.on{
            opacity: 1;pointer-events: painted;transform: translate3d(0,0,0);
          }
          .swiper-slide{
            width: 3rem;background-color: rgba(255, 255, 255, .3);border-radius: .05rem;
            box-shadow: 0px .5rem .8rem -2px rgba(82,106,128,0.31);
            @extend .flex-col-cc;
            .photo{
              padding: .25rem .25rem 0 .25rem;height: 3.6rem;
              width: 100%;display: block;
              &>img{
                display: block;height: 100%;width: 100%;
                object-fit: contain;
              }
            }
            h3{
              padding: .32rem 5%;display: block;
            }
          }
        }
        .layer-set{
          padding-top: .5rem;@extend .fxc;width: 100%;
          .layer-btn{
            position: relative;margin: 0 .1rem;
            width: .65rem;height: .65rem;padding: 0;
          }
        }
      }
    }
  }
}
.searchPage{
  .r1{
    background-color: rgba(239, 242, 248, 1);
    .inner{
      .top{
        position: relative;padding-bottom: .525rem;
        &>img{
          width: 100%;display: block;height: 5.6rem;
          object-fit: cover;
        }
        .layer-topic{
          position: absolute;left: 0;width: 100%;
          top: 3rem;
        }
        .searchBox{
          position: absolute;width: 13.2rem;
          left: 0;right: 0;margin: 0 auto;
          bottom: 0;z-index: 5;
          box-shadow: 0px 13px 21px -2px rgba(98,128,164,0.12);
          display: grid;
          grid-template-columns: 11rem 2.2rem;
          grid-template-rows: 1.05rem;
          border-radius: .05rem;overflow: hidden;
          .inTxt{
            padding: .3rem .6rem;
            width: 11rem;border: none;
            &::placeholder{
              color: rgba(16, 36, 193, .4);
            }
          }
          .layer-btn{border-radius: 0;}
        }
      }
      .clear{
        padding: 1.2rem 0;position: relative;
        .note{
          font-size: 2rem;color: rgba(160, 193, 233, .1);
          text-transform: uppercase;
          position: absolute;top: 50%;transform: translate3d(0,-50%,0);
          text-align: center;left: 0;width: 100%;
          letter-spacing: .3em;
        }
        h2{
          text-align: center;
          em{
            font-size: inherit;color: var(--main);
          }
        }
      }
      .mid{
        padding: 0 3rem;
        h3{text-align: center;margin-bottom: .55rem}
        .items{
          .list{
            padding: .4rem .6rem;position: relative;margin-bottom: .2rem;
            border-bottom: 1px solid rgba(193, 203, 209, 1);cursor: pointer;
            h4{margin-bottom: .1rem;transition: color .5s var(--ease);}
            p{width: 80%;transition: opacity .5s var(--ease);}
            .layer-btn{
              position: absolute;right: .4rem;
              top: 0;bottom: 0;margin: auto 0;
              width: .48rem;height: .48rem;border-radius: .05rem;
              border: 1px solid rgba(21, 42, 211, .2);padding: 0;
              background-color: transparent;
              .icon{
                .rect{fill: var(--main);}
              }
            }
            &:hover{
              .layer-btn{
                &>.mask{
                  transform: translateX(0)!important;
                }
                .icon{
                  -webkit-mask-position-x: 0.32rem;
                  &.small{-webkit-mask-position-x: 0.22rem;}
                  &.tint{-webkit-mask-position-x: 0.15rem;}
                  .rect{
                    opacity: 1;fill: #fff!important;
                  }
                }
              }
              h4{color: var(--main);}
              p{opacity: 1;}
            }
          }
        }
      }
      .btm{
        padding: 1rem 0;
      }
    }
  }
}
.lawPage{
  .r1{
    background-color: rgba(239, 242, 248, 1);
    .inner{
      .top{
        position: relative;
        &>img{
          width: 100%;display: block;height: 5rem;
          object-fit: cover;
        }
        .layer-topic{
          position: absolute;left: 0;width: 100%;
          top: 2.5rem;
        }
      }
      .mid{
        padding-top: 1.2rem;padding-bottom: 1.4rem;
        width: 10rem;margin: 0 auto;
        .detail{
          *{font-size: inherit;color: var(--black);line-height: 1.5;}
          img{height: auto;display: block;margin: 0.35rem auto;max-width: 100%;width: 100%;}
        }
      }
    }
  }
}
@keyframes clip {
  0%{
    clip-path: inset(0 100% 0 0 round 0);
  }
  100%{
    clip-path: inset(0 0 0 0 round 0);
  }
}

@keyframes clipFn {
  0% {
    clip-path: inset(28% 56% 28% 8.3vw round .05rem);
  }
  100% {
    clip-path: inset(0 0 0 0 round 0);
  }
}
@keyframes clipFn_app {
  0% {
    clip-path: inset(50% 5% 10% 5% round .1rem);
  }
  100% {
    clip-path: inset(0 0 0 0 round 0);
  }
}
@keyframes imgFn {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes imgFn_app {
  0% {
    transform: scale(0.9);height: 50%;
  }
  100% {
    transform: scale(1);height: 100%;
  }
}
@keyframes scrollFn {
  0%{
    transform: translate3d(0,-.02rem,0) rotate(90deg);
  }
  100%{
    transform: translate3d(0,.12rem,0) rotate(90deg);
  }
}